.bui-rating {
  --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
  --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
  --large-margin-right: var(--bui-rating-large-margin-right, 2px);
  --large-font-size: var(--bui-rating-large-font-size, 22px);

  display: flex;
  flex-wrap: wrap;
  font-family: var(--bui-font-family);

  &-disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  &-container {
    position: relative;
    display: flex;

    &:last-child {
      margin-right: 0;
    }

    &-xsmall {
      font-size: var(--bui-text-size-5);
    }

    &-small {
      font-size: var(--bui-text-size-1);
      margin-right: var(--small-margin-right);
    }

    &-medium {
      font-size: var(--bui-title-size-3);
      margin-right: var(--medium-margin-right);
    }

    &-large {
      font-size: var(--large-font-size);
      margin-right: var(--large-margin-right);
    }
  }

  &-item {
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    color: var(--bui-color-fg-disabled);

    &-input {
      display: none;
    }

    &-half {
      position: absolute;
      top: 0;
      width: 50%;
    }

    &-readonly {
      cursor: unset;
    }

    &-active {
      color: var(--bui-color-warning);
    }
  }
}
